<button type="button" onclick="addAttrDiv()" class="btn btn-success">添加规格</button>
<button type="button" onclick="removeAttrDiv()" class="btn btn-danger">去除规格</button>
<div>
    <div id="attr_div" class="pull-left">
        <div>

        </div>
    </div>
</div>

<script>
    var i = 0;
    //addAttrDiv();

    //添加规格div
    function addAttrDiv() {
        j = i + 1;
        var attrString = [
            '<div>',
            '      <label class="control-label">规格' + j + '名</label>',
            '      <div class="">',
            '           <input name="attr_name[' + i + ']" type="text" class="form-control" placeholder="规格名">',
            '      </div>',
            '      <div>',
            '      <label class="control-label">规格' + j + '值<button onclick="addAttrValue(this)" type="button" class="btn btn-success">+</button><button onclick="removeAttrValue(this)" type="button" class="btn btn-danger">-</button></label>',
            '           <input name="attr_value[' + i + '][]" type="text" class="form-control" placeholder="规格值">',
            '      </div>',
            '</div>'
        ].join("");
        $('#attr_div').append(attrString);
        i++;
    }

    //移除规格div
    function removeAttrDiv(ele) {
        var attrDiv = $('#attr_div').children("div:last-child");
        if (attrDiv.length > 0) {
            attrDiv.remove();
            if (i >= 1) {
                i--;
            }

        }
    }

    //为某个规格div添加规格值
    function addAttrValue(ele) {
        var input = $(ele).parent().next();
        input.after(input.prop("outerHTML"));
    }

    //移除规格值input
    function removeAttrValue(ele) {
        var input = $(ele).parent().parent().children("input:last-child");
        if ($(ele).parent().parent().children('input').length > 1) {
            input.remove();
        }
    }
</script>